<template>
  <div class="top-wrap">
    <mu-appbar class="top-nav" :zDepth="0">
      <mu-avatar slot="left" :size="30">
        <img :src="avatar" >
      </mu-avatar>
      <div class="title" slot="default">
        <div class="title-item">首页</div>
      </div>
    </mu-appbar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        avatar: '../../../static/css/img/2.jpg'
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .mu-appbar
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background #2753f4
    background -webkit-linear-gradient(left, #2753f4 0%, #7bd9e8 42%)
    background -moz-linear-gradient(left, #2753f4 0%, #7bd9e8 42%)
    background linear-gradient(to right, #2753f4 0%, #7bd9e8 42%)
    .mu-avatar
      margin-left 12px
    .title
      padding-right 12px
      .title-item
        margin 0 auto
        width 48px
        height 34px
        line-height 30px
        border-radius 4px
        font-weight 500
        text-align center
</style>
